<template>
  <el-form ref="form" label-width="80px" label-position="left">
    <el-form-item label="商品名称">
      <el-input 
        style="max-width: 40%; min-width: 400px;" 
        :value="title" 
        @input="vModel('title', $event)" 
        placeholder="请输入商品名称，不能超过60个字符"></el-input>
    </el-form-item>
    <el-form-item label="商品分类">
      <el-cascader 
        style="width: 100%; max-width: 40%; min-width: 400px;"
        :value="category" 
        @input="vModel('category', $event)"
        :options="options"
        :props="{ expandTrigger: 'hover' }"></el-cascader>
    </el-form-item>
    <el-form-item label="商品描述">
      <el-input 
        style="max-width: 40%; min-width: 400px;" 
        :autosize="{ minRows: 4, maxRows: 8}" 
        class="w-50" 
        type="textarea" 
        placeholder="选填，商品买点描述，例如：此商品美观大方 性价比高 不容错过" 
        :value="desc" 
        @input="vModel('desc', $event)"></el-input>
    </el-form-item>
    <el-form-item label="商品单位">
      <el-input 
        style="max-width: 40%; min-width: 400px;" 
        :value="unit" 
        @input="vModel('unit', $event)" 
        placeholder="请输入商品单位"></el-input>
    </el-form-item>
    <el-form-item label="总库存">
      <el-input 
        style="max-width: 16%; min-width: 250px;" 
        type="number" 
        :value="stock" 
        @input="vModel('stock', $event)">
          <template slot="append">件</template>
      </el-input>
    </el-form-item>
    <el-form-item label="库存预警">
      <el-input 
        style="max-width: 16%; min-width: 250px;" 
        type="number"
        :value="min_stock" 
        @input="vModel('min_stock', $event)">
          <template slot="append">件</template>
      </el-input>
    </el-form-item>
    <el-form-item label="库存显示">
      <el-radio-group 
        style="max-width: 16%; min-width: 250px;" 
        :value="display_stock"
        @input="vModel('display_stock', $event)">
          <el-radio class="mr-2" label="0" border>是</el-radio>
          <el-radio label="1" border>否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否上架">
      <el-radio-group 
        style="max-width: 16%; min-width: 250px;" 
        :value="status" 
        @input="vModel('status', $event)">
          <el-radio class="mr-2" label="0" border>放入仓库</el-radio>
          <el-radio label="1" border>立即上架</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="运费模板">
      <el-select 
        style="max-width: 16%; min-width: 250px;"
        placeholder="请选择" 
        :value="express" 
        @input="vModel('express', $event)">
          <el-option :label="123" value="0">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import {options} from '@/common/json'
import {mapState, mapMutations} from 'vuex'
const goods_create_state = ['title', 'category', 'desc', 'unit', 'stock', 'min_stock', 'display_stock', 'status', 'express']
export default {
  name: 'BaseCreateShopForm',
  data() {
    return {
      options,
    }
  },
  computed: {
    ...mapState('goods_create', goods_create_state)
  },
  methods: {
    ...mapMutations('goods_create', ['vModelState']),
    // v-model 对于 vuex中改数据的拆分方法
    vModel(key, val){
      this.vModelState({key, val})
    } 
  }
}
</script>

<style scoped>

</style>